<template>
  <!-- 提示框  信息不完整 -->
  <div class="q-pa-md q-gutter-sm">
    <q-dialog
        v-model="box.isErrRow"
        persistent
        transition-show="scale"
        transition-hide="scale"
    >
      <q-card class="bg-teal text-white" style="width: 300px">
        <q-card-section>
          <div class="text-h6">注意</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          {{ box.errRowData }}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
  <!-- 提示框  内容错误-->
  <q-dialog v-model="box.boxDialog" position="top">
    <q-card class="bg-pink text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">提示</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        请确认格式是否输入正确.
      </q-card-section>
      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8 text-grey">例如:（木箱） 300*280*290</div>
          <div class="text-grey">例如:（托盘） 300*290</div>
          <div class="text-grey">可以开启或关闭智能提示</div>
          <div class="text-grey">
            开启智能提示时,输入数量后会自动关闭当前提示框.
          </div>
        </div>
        <q-btn
            flat
            color="primary"
            @click="!box.isDialog"
            label="OK"
            v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <!-- 输入框部分 -->
        <div class="q-gutter-md row justify-around">
          <div class="col-0" v-show="!box.isTrue"   >  </div>
          <q-chip v-show="box.isTrue" dense size="lg"  color="teal-9" text-color="white" >确认 </q-chip>

          <q-input
              v-model.trim="box.outStockApplyId"
              type="text"
              label="系统订单号"
              disable
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-input
              v-model.trim="box.yesExport"
              type="text"
              label="内销/外销"
              @blur.native.capture="yesExportIsNorm()"
          >
            <template v-slot:append>
              <q-icon
                  :name="
                  box.yesExport == '外销' ? 'directions_boat' : 'local_shipping'
                "
                  size="80%"
              />
            </template>
          </q-input>
          <q-input
              v-model.trim="box.customerPurchaseOrderId"
              type="text"
              label="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input v-model.trim="box.supplierName" type="text" label="供应商">
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>

          <!-- <q-input v-model="box.boxPlanDate" type="date" hint="计划交期" /> -->
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->
        <div style="height: 15px"></div>
        <div class="row q-gutter-md justify-around">
          <div class="q-gutter-md row items-start justify-around">
            <!-- <div   class=" q-gutter-md row justify-center ">
    <div class=" q-gutter-md  "> -->
            <q-btn-group>
              <q-btn push label="提交" ripple text-color="red-9"  @click="UIinsertOutStockApply" />
              <q-btn push label="新增" ripple text-color="teal-9"  @click="boxAddRows" />
              <q-btn push label="查找" ripple text-color="deep-orange-8"  @click="webSearchCustomerPurchaseOrderId" />
              <q-btn push label="确认" ripple fab-max text-color="brown-10"  @click="box.isTrue=!box.isTrue" />
              <q-btn push label="打印" ripple fab-max text-color="green-10"  @click="funPrintPDF"  />
            </q-btn-group>
          </div>
          <div class="q-pa-md q-gutter-sm">
          <q-radio v-model="box.radio" val="A4" label="A4" color="red" />
          <q-radio v-model="box.radio" val="A5" label="A5" color="teal" />
          <q-radio v-model="box.radio" val="A5" label="OT"   color="orange" />
          </div>
          <!-- 选择框 -->
          <div class="q-pa-md q-gutter-sm OutStockApply_tree_font" >领用申请订单</div>
        </div>
        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="green-9" inset size="6px" />
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <!-- 表格 -->
      <q-table
          :rows="box.boxRows"
          :columns="columnsInsert"
          virtual-scroll
          hide-pagination
          :rows-per-page-options="[0]"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="title_font">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>

        <!-- 表体部分 -->

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="id" :props="props">{{ props.row.id }}</q-td>
            <!-- 产品大类 -->
            <q-td key="goodsName" :props="props">
              {{ props.row.goodsName }}
              <q-popup-edit v-model="props.row.goodsName" v-slot="scope">
                <q-select
                    v-model="props.row.goodsName"
                    :options="box.goodsOptions"
                ></q-select>
              </q-popup-edit>
            </q-td>

            <!-- 产品材质 -->
<!--            <q-td key="goodsMaterial" :props="props">-->
<!--              {{ props.row.goodsMaterial }}-->
<!--              <q-popup-edit v-model="props.row.goodsMaterial" v-slot="scope">-->
<!--                <q-select-->
<!--                    v-model="props.row.goodsMaterial"-->
<!--                    :options="returnMaterialOptions(props.row)"-->
<!--                ></q-select>-->
<!--              </q-popup-edit>-->
<!--            </q-td>-->
            <!-- 产品规格 -->
            <q-td key="goodsSize" :props="props">
              {{ props.row.goodsSize }}
              <q-popup-edit v-model.trim="props.row.goodsSize" v-slot="scope">
                <q-input
                    v-model="props.row.goodsSize"
                    dense
                    autofocus
                    counter
                    @keyup.enter="scope.set"
                    @blur.native.capture="boxGoodsSizeIsNorm(props.row)"
                />
              </q-popup-edit>
              <!-- <q-badge
                :color="props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]"
              >
              </q-badge> -->
            </q-td>

            <!-- 产品样式 -->
            <q-td key="goodsStyle" :props="props">
              {{ props.row.goodsStyle }}
              <q-popup-edit v-model="props.row.goodsStyle" v-slot="scope">
                <q-select
                    v-model="props.row.goodsStyle"
                    :options="returnStyleOptions(props.row)"
                ></q-select>
              </q-popup-edit>
            </q-td>

            <!-- 订购数量 -->
            <q-td key="outStockApplyQuantity" :props="props">
              {{ props.row.outStockApplyQuantity }}
              <q-popup-edit
                  v-model.number="props.row.outStockApplyQuantity"
                  v-slot="scope"
              >
                <q-input
                    v-model.number="props.row.outStockApplyQuantity"
                    dense
                    autofocus
                    counter
                    type="number"
                    @keyup.enter="scope.set"
                    @blur.native.capture="box.isHeader = false"
                />
              </q-popup-edit>
              <!-- <q-badge
                :color="
                  props.row.outStockApplyQuantity == '' ? Mycolor[6] : Mycolor[6]
                "
              >
              </q-badge> -->
            </q-td>
            <!-- 适用产品 -->
            <q-td key="forProductName" :props="props"
            >{{ props.row.forProductName }}
              <q-popup-edit v-model="props.row.forProductName" v-slot="scope">
                <q-input
                    v-model="props.row.forProductName"
                    dense
                    autofocus
                    counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 备注信息 -->
            <q-td key="outStockApplyCustomerMark" :props="props"
            >{{ props.row.outStockApplyCustomerMark }}
              <q-popup-edit v-model="props.row.outStockApplyCustomerMark" v-slot="scope">
                <q-input
                    v-model="props.row.outStockApplyCustomerMark"
                    dense
                    autofocus
                    counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 操作 .trim-->
            <q-td key="id" :props="props">
              <q-btn
                  icon="delete"
                  @click.stop="boxRowDelete(props.row)"
                  dense
                  flat
                  push
                  class="but_float"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <!-- 表格 -->
    </div>
  </div>
  <!-- 提示框  添加成功-->
  <q-dialog v-model="box.succeed" position="top">
    <q-card class="bg-primary text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">成功提示</div>
      </q-card-section>

      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8">成功添加了{{ box.succeedCount }}条记录 ！~</div>
        </div>
        <q-btn
            flat
            color="primary"
            @click="!box.isDialog"
            label="OK"
            v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

</template>

<script>
import { reactive,  toRaw, onMounted } from "vue";
import {
  getMaxOutStockApplyId,
  insertOutStockApply,
  webOutStockApplyPrintPDF,
  searchCustomerPurchaseOrderDetails
  // getOutStockApply,
  // updateOutStockApply,
  // DeleteOutStockApply,
  // searchOutStockApply
} from "../../API/OutStockApply/OutStockApplyAPI";
import { addAnyID } from "../../utils/goodsTools";
import {  columnsInsert } from "src/API/OutStockApply/OutStockApplyData.ts";


export default {
  data() {
    //获取获取当前库存量
    onMounted(function () {
      // box.cards_data.length = 0;
      // aa();
      // bb();

      // async function aa() {
      //   var res = await getBoxSock();
      //   console.log(res.data);
      //   box.cards_data = res.data;
      // }
      // async function bb() {
      //   var res = await getPurchaseOrderIdList();
      //   console.log(res.data);
      //   box.outStockApplyIdList = res.data;  PO20230922003
      // }
      cc();
      async function cc() {
        var res = await getMaxOutStockApplyId();
        console.log(res.data);
        if (res.data.length>0){
          box.outStockApplyId = addAnyID(res.data[0].outStockApplyId, "OA");
        }else {
          box.outStockApplyId = addAnyID("PO20000000000", "OA");
        }
      }
    });
    //打印领用申请订单
    function  funPrintPDF (){
      let printPart = JSON.stringify({
        "outStockApplyId": box.outStockApplyId,
        "PaperSize" :box.radio
      });
      let url=null
      console.log(printPart)
      webPrint(printPart);
      async function webPrint(printPart) {
        var res = await webOutStockApplyPrintPDF(printPart);
        console.log(res.data);
        url=res.data
        // box.succeed = true;
        // box.succeedCount =  "打印完成";
        if (url.length>10){
          window.open(url)
        }

      }
    }

    //提交订单信息
    function UIinsertOutStockApply() {

      // 第一步 检查信息是否输入完整
      for (let index = 0; index < toRaw(box.boxRows).length; index++) {
        if (box.yesExport==null) {
          box.isErrRow = true;
          box.errRowData = `请输入内销/外销.`;
          return;
        }

        if (
            toRaw(box.boxRows)[index].goodsStyle == null ||
            toRaw(box.boxRows)[index].goodsStyle == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品小类.`;
          return;
        }
        if (
            toRaw(box.boxRows)[index].goodsSize == null ||
            toRaw(box.boxRows)[index].goodsSize == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品规格.`;
          return;
        }

        if (
            toRaw(box.boxRows)[index].outStockApplyQuantity == null ||
            toRaw(box.boxRows)[index].outStockApplyQuantity == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品数量.`;
          return;
        }
      }

      // 第二步 将表头信息加入表身的每一行.
      const boxArr = toRaw(box.boxRows).filter((val, index) => {
        val["yesExport"] = box.yesExport;
        // val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        // val["supplierName"] = box.supplierName;
        val["outStockApplyId"] = box.outStockApplyId;
        // val["planDate"] = box.planDate;
        delete val.id
        return (
            val.goodsSize != "" &&
            val.outStockApplyQuantity != ""
        );
      });
      // console.log(boxArr);
      let insertData = JSON.stringify(boxArr);
      console.log(insertData);
      dd(insertData);
      async function dd(insertData) {
        var res = await insertOutStockApply(insertData);
        console.log(res.data);
        box.succeed = true;
        box.succeedCount = res.data;
      }
    }

    // 内销外销是否正确
    function yesExportIsNorm() {
      if (box.yesExport != "内销" && box.yesExport != "外销") {
        alert("只能输入‘内销’或者‘外销’不能输入其他内容！");
        box.yesExport = "";
      }
    }

    // 返回选择产品样式
    function returnStyleOptions(row) {
      // console.log(toRaw(row).goodsName );
      if (toRaw(row).goodsName == "托盘") {
        return box.trayOptions;
      } else if (toRaw(row).goodsName == "普通木箱") {
        return box.boxOptions;
      } else if (toRaw(row).goodsName == "SMR木箱") {
        return box.SMROptions;
      }
    }
    // 返回选择产品材质
    function returnMaterialOptions(row){
      // console.log(toRaw(row).goodsName );
      if (toRaw(row).goodsName == "托盘") {
        return box.trayMaterialOptions;
      } else if (toRaw(row).goodsName == "普通木箱") {
        return box.boxMaterialOptions;
      } else if (toRaw(row).goodsName == "SMR木箱") {
        return box.SMRMaterialOptions;
      }
    }
    // 智能即时库存
    function nowStock(rowData) {
      console.log("智能即时库存", rowData);
      //第一步  看看是否开启了 智能提示  isPrompts
      //第二步  获取产品分类 (box SMR tray )#C2185B
      if (box.isPrompts) {
        if (rowData.goodsName == "普通木箱") {
          box.isHeader = true;
          box.cards_data = cards_data;
          box.cardBackground = { "background-color": "#C2185B" };
        }
      }
    }
    // 格式是否错误
    function boxGoodsSizeIsNorm(r) {
      console.log("当前输入行的id__", toRaw(r).goodsName);

      if (toRaw(r).goodsName == "普通木箱" || toRaw(r).goodsName == "SMR木箱") {
        var re = new RegExp(
            "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
        );
        if (!re.test(toRaw(r).goodsSize)) {
          box.boxDialog = !box.boxDialog;
          box.boxRows[toRaw(r).id - 1].goodsSize = "";
          return;
        } else {
          // 调用智能检查函数,显示当前库存信息
          nowStock(toRaw(r));
        }
        if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
          boxAddRows();
        }
      } else {
        var re = new RegExp("^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$");
        if (!re.test(toRaw(r).goodsSize)) {
          box.boxDialog = !box.boxDialog;
          box.boxRows[toRaw(r).id - 1].goodsSize = "";
          return;
        } else {
          // 调用智能检查函数,显示当前库存信息
          nowStock(toRaw(r));
        }
        if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
          boxAddRows();
        }
      }
    }

    // 增加一行
    function boxAddRows() {
      var map = {
        id: 0,
        goodsName: "",
        goodsStyle: "",
        goodsSize: "",
        outStockApplyQuantity: "",
        forProductName: "",
        outStockApplyCustomerMark: "",
      };
      map.id = box.boxRows[box.boxRows.length - 1].id + 1;
      // map.id = box.boxRows.length + 1;
      box.boxRows.push(map);
    }

    // 删除一行
    function boxRowDelete(row) {
      if (box.boxRows.length > 1) {
        box.boxRows.splice(toRaw(row).id - 1, 1);
        box.boxRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }
function webSearchCustomerPurchaseOrderId() {
  if (box.customerPurchaseOrderId == ""){
    alert("请输入自定义订单号")
  }else {
    let searchData = JSON.stringify(
        {customerPurchaseOrderId: box.customerPurchaseOrderId}
    );
    console.log(searchData);
    searchDataService(searchData);

    async function searchDataService(searchData) {
      var res = await searchCustomerPurchaseOrderDetails(searchData);
      console.log(res.data);
      if (res.data.length > 0) {
        let i=0;
        box.yesExport = res.data[0].yesExport
        res.data.forEach((row, arr, index) => {
          i=i+1
          row["id"]=i
          // row.push({id: index + 1})
        });
        box.boxRows = res.data;
      }
      else {
        alert("未找到订单信息!~")
      }

    }

}
}
    return {
      funPrintPDF,
      box,
      columnsInsert,
      boxAddRows,
      // Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
      boxRowDelete,
      yesExportIsNorm,
      boxGoodsSizeIsNorm,
      UIinsertOutStockApply,
      returnStyleOptions,
      returnMaterialOptions,
      webSearchCustomerPurchaseOrderId
    };
  },
};
const box = reactive({
  radio:"A5",
  isTrue: false, //确认
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  succeed: false,
  succeedCount: null,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,

  yesExport: "",
  planDate: "",
  outStockApplyId: "",
  supplierName: "",

  goods: "",
  goodsSize: null,
  outStockApplyQuantity: null,

  customerPurchaseOrderId: "WX0000783",
  forProductName: "",


  boxRows: [
    {
      id: 1,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",

      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 2,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",

      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 3,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",

      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 4,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 5,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 6,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 7,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: "",
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
  ],
  goodsOptions: ["普通木箱", "SMR木箱", "托盘"],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  SMROptions: [
    "SMR-30",
    "SMR-35",
    "SMR-40",
    "SMR-45",
    "SMR-50",
    "SMR-60",
    "SMR-70",
    "SMR-80",
    "SMR-100",
    "SMR-125",
    "SMR-203",
    "SMR-B",
    "SMR-C",
    "SMR-D",
    "SMR-E",
    "SMR-F",
    "SMR-G",
    "SMR-H",
    "SMR-J",
    "SMRY-2",
    "SMRY-3",
    "SMRY-4",
    "SMRY-5",
    "SMRY-6",
    "SMRY-7",
    "SMRY-8",
    "SMRY-9",
    "SMRY-10",
    "SMRY-12",
  ],
  trayOptions: ["有盖板", "无盖板"],
  boxMaterialOptions: ["默认", "默认"],
  SMRMaterialOptions: ["默认", "默认"],
  trayMaterialOptions: ["默认", "默认"],
  cards_data: [],
  cardBackground: { "background-color": "#292845;" },
  outStockApplyIdList: [],
});

</script>
<style>
.OutStockApply_tree_font {
  font: 35px sans-serif;
  color:#2E7C32;
  font-family:"方正舒体","幼圆";
  font-weight: bolder;
}
.OutStockApply_title_font {
  color: rgb(17, 17, 19);
  font-size: 14px;
  font-weight: bolder;
}
.OutStockApply_but_float {
  margin-right: 2%;
  float: right;
}

</style>
